<!-- 搜索 -->
<template>
	<view class="search-placeholder">
		<view class="search-fixed">
			<view class="search-box">
				<input class="search-input" type="text" placeholder="请输入关键词" confirm-type="search" v-model="keyword"
					@confirm="handleSearch()" />
				<button class="iconfont search-btn" @click="handleSearch()">&#xe600;</button>
				<button v-if="keyword" class="iconfont clear-btn" @click="handleClear()">&#xe603;</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { useMyNeedsStore } from '../store.js';
	
	const store = useMyNeedsStore();
	const keyword = ref('');
	
	// 点击搜索
	const handleSearch = () => {
		store.SET_PARAMS('name', keyword.value, true);
	}
	
	// 点击清空
	const handleClear = () => {
		keyword.value = '';
		store.SET_PARAMS('name', keyword.value, true);
	}
</script>

<style lang="scss" scoped>
	.search-placeholder {
		height: 122rpx;

		.search-fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			width: 100%;
			height: 122rpx;
			padding: 24rpx 30rpx;
			background-color: white;
			box-sizing: border-box;
		}
	}

	.search-box {
		flex-shrink: 0;
		position: relative;

		.search-input {
			width: 100%;
			height: 74rpx;
			font-size: 28rpx;
			border-radius: 40rpx;
			background-color: #F2F1F2;
			padding: 0 84rpx;
			box-sizing: border-box;

			&:active {
				background-color: #fafafa;
			}
		}

		.search-btn {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 84rpx;
			height: 74rpx;
			font-size: 40rpx;
			color: #CCCCCC;
			text-align: center;
			line-height: 74rpx;
			background-color: transparent;
		}

		.clear-btn {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 1;
			width: 74rpx;
			height: 74rpx;
			font-size: 36rpx;
			color: #CCCCCC;
			text-align: center;
			line-height: 74rpx;
			background-color: transparent;
		}
	}
</style>